<template>
	<view >
		<view v-if="chartType == 'arcbar'" class="qiun-charts3">
			<canvas :id="canvasId" :canvasId="canvasId" class="charts1"></canvas>
		</view>
		
		<canvas v-else-if="canvasId" :id="canvasId" :canvasId="canvasId" class="charts"
		 @touchstart="touchStart" @error="error">
		</canvas>
	</view>
</template>

<script>
	import uCharts from './u-charts.min.js';
	var canvases = {};
	
	export default {
		name:'UCharts',
		props: {
			chartType: {
				required: true,
				type: String,
				default: 'column'
			},
			opts: {
				required: true,
				type: Object,
				default () {
					return null;
				},
			},
			canvasId: {
				type: String,
				default: 'u-canvas',
			},
			cWidth: {
				type: Number,
				default: 320,
			},
			cHeight: {
				type: Number,
				default: 420,
			},
			pixelRatio: {
				type: Number,
				default: 1,
			},
		},
		data() {
			return {
				dWidth:250,
				dHeight:250,
				dataMax:5000
			}
		},
		created() {
			this.dWidth = this.cWidth;
			this.dHeight = uni.upx2px(this.cHeight);
			let _this = this;
			
			// 根据可视窗口宽度计算图表宽度
			uni.getSystemInfo(
				{
					success:function (res) {
						// console.log('手机信息：'+uni.upx2px(560));
						_this.dWidth = res.windowWidth-30;
					}
				}
			)
			// 计算当前数据最大值 max ,用于绘制 Y 轴显示
			let tMax = 0;
			for (let i = 0; i < _this.opts.series.length; i++) {
				
				for (let j = 0; j < _this.opts.series[i].data.length; j++) {
					if (_this.opts.series[i].data[j] > tMax) {
						tMax = _this.opts.series[i].data[j];
					}
				}
				
			}
			
			_this.dataMax = tMax*0.2+tMax;
			
		},
		mounted() {
			this.init();
			this.changeData(this.canvasId,this.opts);
		},
		watch:{
			opts(newData,oldData) {
				this.changeData(this.canvasId,newData);
			}
		},
		methods: {
			init() {
				this.initColumnChart();
			},
			initColumnChart() {
				if (this.chartType === 'arcbar') {
					canvases[this.canvasId] = new uCharts({
						$this: this,
						canvasId: this.canvasId,
						type: 'arcbar',
						fontSize:11,
						legend:{show:false},
						background:'#FFFFFF',
						pixelRatio:1,
						series: this.opts.series,
						animation: true,
						width: uni.upx2px(180),
						height: uni.upx2px(180),
						dataLabel: true,
						title: {
							name: this.opts.series[0].text+'%',//这里我自动计算了，您可以直接给任意字符串
							color: this.opts.series[0].color,
							fontSize: 20
						},
						extra: {
							arcbar:{
								type:'circle',//整圆类型进度条图
								width: uni.upx2px(8)*1,//圆弧的宽度
								startAngle:1.5//整圆类型只需配置起始角度即可
							}
						},
					});
				}else{
					canvases[this.canvasId] = new uCharts({
						$this: this,
						canvasId: this.canvasId,
						type: this.chartType,
						legend:{
							show:true,
							position:'bottom',
							float:'center',
							padding:5,
							lineHeight:20,
							margin:6,
						},
						fontSize: 11,
						background: '#FFFFFF',
						pixelRatio: this.pixelRatio,
						animation: true,
						categories: this.opts.categories,
						series: this.opts.series,
						enableScroll: true,
						xAxis: {
							gridType:'dash',
							disableGrid: true,
							itemCount: this.opts.categories.length,
							scrollShow: false
						},
						yAxis: {
							//disabled:true
							// showTitle:this.opts.yAxis.showTitle,
							gridType:'dash',
							gridColor:'#CCCCCC',
							dashLength:8,
							splitNumber:5,
							max:this.dataMax,
							// data:this.opts.yAxis.data
							format:(val)=>{return parseInt(val)}
						},
						dataLabel: false,
						dataPointShape: true,
						dataPointShapeType:'solid',
						width: this.dWidth * this.pixelRatio,
						height: this.dHeight * this.pixelRatio,
						extra: {
							column: {
								type: 'group',
								width:6
							},
							line: {
								type: 'straight'
							},
							tooltip:{
								bgColor:'#000000',
								bgOpacity:0.7,
								gridType:'dash',
								dashLength:4,
								gridColor:'#1890ff',
								fontColor:'#FFFFFF',
								horizentalLine:true,
								xAxisLabel:true,
								yAxisLabel:true,
								labelBgColor:'#DFE8FF',
								labelBgOpacity:0.95,
								labelAlign:'left',
								labelFontColor:'#666666'
							}
						}
					});
				}
				
			},
			
			// 这里仅作为示例传入两个参数，cid为canvas-id,newdata为更新的数据，需要更多参数请自行修改
			changeData(cid,newdata) {
				// console.log('cid = ',(newdata.series[0].data*100).toFixed(2));
				if (newdata.chartType === 'arcbar') {
					canvases[cid].updateData({
						series: newdata.series,
						title: {
							name: newdata.series[0].text+'%',//这里我自动计算了，您可以直接给任意字符串
							color: newdata.series[0].color,
							fontSize: 20
						},
					});
				}else{
					canvases[cid].updateData({
						series: newdata.series,
						categories: newdata.categories
					});
				}
			},
			touchStart(e) {
				canvases[this.canvasId].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
				// canvases[this.canvasId].scrollStart(e);
			},
			touchMove(e) {
				canvases[this.canvasId].scroll(e);
			},
			touchEnd(e) {
				canvases[this.canvasId].scrollEnd(e);
			},
			error(e) {
				console.log(e)
			}
		},
	};
</script>

<style scoped>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	
	/* .charts{width:100%;height:100%;margin-left:0px;margin-right:10px;margin-top:0px;flex: 1;background-color: #FFFFFF;} */
	.qiun-charts3 {
		width: 180upx;
		height: 180upx;
		background-color: #FFFFFF;
		position: relative;
	}
	.charts{width: 100%; height:400upx;background-color: #FFFFFF;}
	.charts1{
		position: absolute;
		width: 180upx;
		height: 180upx;
		background-color: #FFFFFF;
	}
</style>


<!-- 示例 -->

<!-- option1:{
	chartType1:'mix',
	categories:['1月','2月','3月','4月','5月','6月'],
	yAxis:{
		showTitle:true,	//是否显示 y 轴标题
		data:[	// 与 showTitle 一起，缺一不可 ，showTitle 为 true 时，data 必须有值， 为 false 时 ,data 可为空
			{
				title:'数量',
				calibration:true,
				min:10
			},
			{
				calibration:true,
				position:'right',
				min:10,
				title:'金额(万元)',
				format:(val)=>{return val.toFixed(0)},
			}
		]
	},
	series:[
		{
			name:'总保费',
			data:[638,300,488,1050,214,842],
			color:'#97a2fe',
			type:'column'
		},
		{
			name:'新保费',
			data:[318,854,792,229,386,568],
			color:'#3eb5fa',
			type:'column'
		},
		{
			name:'非车险卡单',
			data:[500,475,600,622,404,520],
			color:'#cd9aff',
			type:'column'
		},
		{
			name:'非车险渗透率',
			data:[875,855,920,777,688,788],
			color:'#ff9693',
			type:'column'
		},
		{
			index:1,
			name:'金额',
			data:[12,48,29,76,45,19],
			color:'#ff6082',
			type:'line',
			addPoint:true
		}
	]
},
 -->



